<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import { showToast } from "vant"
const router = useRouter();
const value = ref('')

// 搜索历史记录
const historyData = ref(<Array<string>>([]));
historyData.value = JSON.parse(localStorage.getItem('historyList') as string) || [];

// 回车搜索
const onSearch = (val: string) => {
    if (!val) {
        return
    } else {
        historyData.value = historyData.value.filter(o => o != val)
        historyData.value = [val, ...historyData.value]
        localStorage.setItem("historyList", JSON.stringify(historyData.value));
        router.push(`/searchResult/${val}`)
    }
    value.value = ''
};

// 取消按钮
const onCancel = () => {
    router.back()
};


// 删除历史记录
const clear = () => {
    historyData.value = [];
    localStorage.setItem("historyList", JSON.stringify(historyData.value));
    showToast('已清除历史记录！')
}

// 热门搜索数据
const hotData = ref([
    {
        id: 1,
        text: '清仓特价',
    },
    {
        id: 2,
        text: '特价秒杀',
    },
    {
        id: 3,
        text: '2299元iphoneX',
    },
    {
        id: 4,
        text: '回收赚钱',
    },
])
</script>

<template>
    <div class="search-page fixed-zbest">
        <div class="search-head">
            <form action="/">
                <van-search v-model="value" show-action placeholder="清仓特价" @search="onSearch" @cancel="onCancel"/>
            </form>
        </div>
        <div class="hot-search">
            <div class="hot-title">热门搜索</div>
            <div class="hot-list">
                <div class="hot-item" v-for="h in hotData" :key="h.id" @click="onSearch(h.text)">{{ h.text }}</div>
            </div>
        </div>
        <div class="his-search" v-if="historyData.length">
            <div class="his-title-box">
                <span>历史搜索</span>
                <van-icon name="delete-o" size="23" @click.stop="clear"/>
            </div>
            <div class="his-list">
                <div class="his-item" v-for="(item, index) in historyData" :key="index" @click.stop="onSearch(item)">
                    {{ item }}
                </div>
            </div>
        </div>
        <router-view/>
    </div>
</template>

<style lang="scss" scoped>
.search-page {
    width: 100%;

    .hot-search {
        .hot-title {
            margin-top: .13rem;
            font-size: .16rem;
            padding-left: .15rem;
            font-weight: 500;
        }

        .hot-list {
            margin-top: .12rem;
            display: flex;
            padding: 0 .04rem;
            flex-wrap: wrap;
            box-sizing: border-box;
            border-bottom: 1px solid #f1f1f1;

            .hot-item {
                padding: 0 .12rem;
                height: .3rem;
                line-height: .3rem;
                text-align: center;
                background-color: #f2f3f5;
                color: #333;
                border-radius: .05rem;
                margin-right: .1rem;
                margin-bottom: .1rem;
                font-size: .15rem;
            }
        }
    }

    .his-search {
        .his-title-box {
            padding: 0 .12rem;
            display: flex;
            justify-content: space-between;
            font-size: .15rem;
            font-weight: 600;
            align-items: center;
            height: .5rem;
        }

        .his-list {
            display: flex;
            flex-wrap: wrap;

            .his-item {
                width: 50%;
                height: .5rem;
                line-height: .5rem;
                border: 1px solid #f2f2f2;
                box-sizing: border-box;
                font-size: .14rem;
                color: #444;
                padding-left: .2rem;
                overflow: hidden;
            }
        }
    }
}
</style>